<template>
  <div class="app-container">
    <el-card class="page-tools">
      <el-button type="primary" @click="$router.push('/employees')">返回</el-button>
      <UploadExcel :on-success="handleSuccess" :before-upload="beforeUpload" />
    </el-card>
  </div>
</template>

<script>
import { addEmployeesByExcelRequest } from '@/api/employees'
export default {
  name: 'Import',

  methods: {
    beforeUpload(file) {
      return true
    },
    async handleSuccess({ header, results }) {
      // header中, results中的数据是中文的, 但是提交给后台的要是英文的，因此提供模板
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber'
      }
      const newResultsList = []
      // 将结果里的每一项对象抽离出来，以便遍历对象
      results.forEach((item) => {
        const obj = {}
        // 遍历 item，每一个 key 就是对应的中文键名
        for (const key in item) {
          // 日期处理：
          if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') {
            obj[userRelations[key]] = this.formatExcelDate(item[key], '-')
          } else {
            // userRelations[key] 就是 userRelations 模板对象里的中文键名对应的键值，例如：key为"手机号"，则 userRelations[key] 就是 "mobile"
            // obj 的英文键名的键值就对应等于 item 的键值
            // 假如 key 为"手机号"，则 userRelations[key] 就是 "mobile"，即obj[mobile]（此为键名）的键值就是 item[手机号]（此为键值）
            obj[userRelations[key]] = item[key]
          }
        }
        // console.log(obj)
        // 将得到更改键名的obj push到新结果数组中
        newResultsList.push(obj)
      })

      // 发起请求，添加数据：
      await addEmployeesByExcelRequest(newResultsList)
      // 给出提示
      this.$message.success('恭喜，添加成功')
      // 跳转到员工页面
      this.$router.push('/employees')

      // 自己写的：
      // 将结果里的每一项对象抽离出来，以便遍历对象
      // results.forEach((item) => {
      //   // 遍历模板键值对的对象
      //   for (const userKey in userRelations) {
      //     // 遍历每一个 item
      //     for (const itemKey in item) {
      //       // 如果初始结果对象里的中文键名 = 模板键值对对象里的中文键名，
      //       // 则将模板里面的中文对应的英文键名，作为键名赋值给 obj，同时将初始结果对象里的键值，作为键值赋值给 obj
      //       if (itemKey === userKey) {
      //         // obj[userRelations[userKey]] 指obj的键名是 userRelations 里的对应英文键名
      //         // item[itemKey] 对应的键值
      //         obj[userRelations[userKey]] = item[itemKey]
      //       }
      //     }
      //   }
      //   console.log(obj)
      //  将得到更改键名的obj push到新结果数组中
      //   newResultsList.push(obj)
      // })
    },
    // 注意：发送请求的时候，excel会将日期转换，excel 的日期计算为：1900年到表格中指定日期的天数（时间戳）,也就是说1900年1月1日在Excel中是1
    // numb 为传入的日期，format 为连接符
    formatExcelDate(numb, format) {
      const time = new Date((numb) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        return year + format + (month < 10 ? '0' + month : month) + format + (date < 10 ? '0' + date : date)
      }
      return year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding: 20px;
  .page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
}
}
</style>
